<script setup>

import { onMounted, ref, reactive} from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import moment from "moment";


var currentTitle = ref("新建视频");
var dialogFormVisible = ref(false);
var dialogFormVisibleEdit=ref(false);
var dataList = ref([]);
var currentPage = ref(1);
var totalCount = ref(0);

const formData = reactive({
    name: '',
    url: 'http://172.16.2.33:8080/live/34020000001320000001.flv',
    code: 'h264',
    width: '1920',
    height: '1080',
})

onMounted(() => {
    loadList();
});

function handleCreate() {
    currentTitle.value = "新建视频";
    dialogFormVisible.value = true;
}

function handleCurrentChange(row) {
    console.log(row);
    currentPage.value = row;
    loadList();
}

async function loadList() {

    var data = {
      pageIndex: currentPage.value,
      pageSize: 10
    };

    var ret = await axios.get('/api/mediasource',{
      params: data
    });
    if (ret.data.code == 0) {
        dataList.value.length = 0;
        console.log(ret.data);
        totalCount.value = ret.data.data.total;
        _(ret.data.data.items).forEach((v) => {
            dataList.value.push(v);
        })
    }
}

async function handleEdit(index, row) {
    currentTitle.value = "编辑视频";
    dialogFormVisibleEdit.value = true;

    formData.id = row.id;
    formData.name = row.name;
    formData.url = row.url;
    formData.code = row.code;
    formData.width = row.width;
    formData.height = row.height;
}

async function updateData(){
    if (formData.name === "") {
        ElMessage({
            message: '名称不能空',
            type: 'warning',
        })
        return;
    }
    if (formData.url === "") {
        ElMessage({
            message: '地址不能空',
            type: 'warning',
        })
        return;
    }
    var ret = await axios.put('/api/mediasource', formData);
    if (ret.data.code == 0) {
        loadList();
        formData.name = '';
        formData.url = '';
        formData.code = '';
        formData.width = '';
        formData.height = '';
        delete formData.id;
    }
    else {
        ElMessage({
            message: ret.data.message,
            type: 'error',
        })
    }
    dialogFormVisibleEdit.value = false;
}

async function createData() {

    if (formData.name === "") {
        ElMessage({
            message: '名称不能空',
            type: 'warning',
        })
        return;
    }
    if (formData.url === "") {
        ElMessage({
            message: '地址不能空',
            type: 'warning',
        })
        return;
    }
    var ret = await axios.post('/api/mediasource', formData);
    if (ret.data.code == 0) {
        loadList();
        formData.name = '';
        formData.url = '';
        formData.code = '';
        formData.width = '';
        formData.height = '';
        delete formData.id;
    }
    else {
        ElMessage({
            message: ret.data.message,
            type: 'error',
        })
    }
    dialogFormVisible.value = false;
}

function formatTimestamp(timestamp) {
  return moment.utc(timestamp).format('YYYY-MM-DD HH:mm:ss.SSS');
}

</script>

<template>
    <div>
        <el-card style="margin:10px 0px;">
            <el-button type="primary" @click="handleCreate" class="ml-2"><el-icon>
                    <CirclePlus />
                </el-icon>新建视频</el-button>
        </el-card>
        <el-table class="tableClass" :data="dataList" style="width: 100%" :default-expand-all="true" border
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-style="{ height: '50px' }">
            <el-table-column type="index" width="45"></el-table-column>
            <el-table-column prop="name" label="视频流名称"> </el-table-column>
            <el-table-column prop="url" label="地址" width="atuo" :show-overflow-tooltip="true"> </el-table-column>

            <el-table-column prop="width" label="宽" width="atuo"> </el-table-column>
            <el-table-column prop="height" label="高" width="atuo"> </el-table-column>

            <el-table-column prop="code" label="编码格式" width="atuo" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="timestamp" label="创建时间">
                <template #default="scope">
                    <span>
                        {{ formatTimestamp(scope.row.timestamp) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="110">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" icon-color="#626AEF"
                        title="确定删除此记录?">
                        <template #reference>
                            <el-button size="small" type="danger">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="12" :current-page="currentPage" layout="->,total, prev, pager, next" :total="totalCount"
            @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog v-model="dialogFormVisible" title="新建视频" width="500">
            <el-form :model="formData">
                <el-form-item label="名称" label-width="90">
                    <el-input v-model="formData.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地址" label-width="90">
                    <el-input v-model="formData.url" autocomplete="off" />
                </el-form-item>
                <el-form-item label="编码" label-width="90">
                    <el-input v-model="formData.code" autocomplete="off" />
                </el-form-item>
                <el-form-item label="宽" label-width="90">
                    <el-input v-model="formData.width" autocomplete="off" />
                </el-form-item>
                <el-form-item label="高" label-width="90">
                    <el-input v-model="formData.height" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="createData">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogFormVisibleEdit" title="编辑视频" width="500">
            <el-form :model="formData">
                <el-form-item label="名称" label-width="90">
                    <el-input v-model="formData.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地址" label-width="90">
                    <el-input v-model="formData.url" autocomplete="off" />
                </el-form-item>
                <el-form-item label="编码" label-width="90">
                    <el-input v-model="formData.code" autocomplete="off" />
                </el-form-item>
                <el-form-item label="宽" label-width="90">
                    <el-input v-model="formData.width" autocomplete="off" />
                </el-form-item>
                <el-form-item label="高" label-width="90">
                    <el-input v-model="formData.height" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateData">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.el-card {
    padding: 0px;
    margin: 5px;
    --el-card-padding: 10px;
}
</style>